<template>
  <div class="listItem">
    <div class="image">
      <img :src="user.avtar.url" class="imageIn" />
    </div>
    <div class='right' @click="$router.push(`/talk/${item.lastMessage.from}`)">
      <div class="top">{{user.username}}</div>
      <div class="bottom">
        <span v-if="item.lastMessage">{{item.lastMessage._lctext}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import { defaultImage } from "../../../assets";
  import { getQuery } from '../../../utils/Av';
  export default {
    props: {
      item: {
        type: Object,
        default: {
          lastMessage: {
            _lctext: ""
          },
        }
      }
    },
    data() {
      return {
        defaultImage,
        user: { avtar: { url: "" } }
      };
    },
    /*   async created() {
      
      }, */
    async mounted() {
      var self = this
      setTimeout(async () => {
        // console.log(this.$props.item.lastMessage)
        if (self.$props.item.lastMessage) {
          var q = getQuery('_User')
          var user = await q.equalTo('objectId', self.$props.item.lastMessage.from).first()
          self.user = user.toJSON()
        }
      }, 300)

    }
  };
</script>
<style lang="less" scoped>
  .listItem {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #eee;
  }



  .image {
    margin-right: 10px;
    width: 50px;
    height: 50px;
    border: 1px solid #eee;
    border-radius: 100%;

    img {
      border-radius: 100%;
      width: 100%;
      height: 100%;
    }
  }
</style>